<template>
	<view class="box bg-white">
		<view class="padding-l-r-30">
			<view class="img-box">
				<image src='https://q8.itc.cn/q_70/images03/20250322/ff42db5809844e5dbb975da4445b9855.png'
					mode="widthFix"></image>
			</view>
			<view class="title-box justifyContent-spaceBetween align-items-center">
				<text class="fs-34 color-333 fw-b">设计</text>
				<text class="fs-24 color-80" @click="goDesignMore">
					更多 >
				</text>
			</view>
		</view>
		<view style="padding-left: 30rpx;">
			<scroll-view scroll-x="true">
				<view class="align-items-center" style="padding: 10rpx 0;">
					<view v-for="(item , index) in designList" class="design-list margin-l-20"
						:class="{'margin-l-20':index}" @click="goDesigner(item)">
						<view class="img-box">
							<image :src=" BASE_URL + item.images" mode="aspectFill"></image>
						</view>
						<view class="flex-1 flex-column justifyContent-spaceBetween">
							<text class="color-0 fs-28 fw-b only-1">{{item.name}}</text>
							<text class="fs-24 color-4d only-1">从业{{item.work_year}}年</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="padding-l-r-30 padding-b-30">
			<view class="title-box justifyContent-spaceBetween align-items-center">
				<text class="fs-34 color-333 fw-b">改造</text>
				<text class="fs-24 color-80" @click="goTransformMore">
					更多 >
				</text>
			</view>
            <view v-for="item in transformList">
                <transform :item="item"></transform>
            </view>
		</view>
	</view>
</template>

<script>
	import transform from "@/components/transform/transform.vue";
    import  { decorationList }  from  "@/api/elderlySuitable"
    import $baseUrl from "@/config/index.js"
    const BASE_URL = $baseUrl.baseUrl
    export default {
		components: {
            transform
		},
		data() {
			return {
                BASE_URL,
				designList: [ ],
                transformList: [  ],
			}
		},
        onShow() {
            this.getInitInfo()
        },
		methods: {
            getInitInfo( ){
                this.page =1
              this.getInfoList()
            },
            getInfoList(){
                let params = {
                    page:1,
                    limit: 10,
                    type:1
                },params1 = {
                    page: 1,
                    limit: 10,
                    type:2
                }
                decorationList(params).then(res=>{
                    if (res.code == 1){
                        this.designList = res.data
                    }else {
                        uni.showToast({
                            icon:'none',
                            title:res.msg
                        })
                    }
                })
                decorationList(params1).then(res=>{
                    if (res.code == 1){
                        this.transformList = res.data
                    }else {
                        uni.showToast({
                            icon:'none',
                            title:res.msg
                        })
                    }
                })
            },
			goTransformMore(){
				uni.navigateTo({
					url:'/pageA/elderlySuitable/transform'
				})
			},
			goDesignMore(){
				uni.navigateTo({
					url:'/pageA/elderlySuitable/design'
				})
			},
			goDesigner(item){
				uni.navigateTo({
					url:'/pageA/elderlySuitable/designer?id='+item.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.img-box {
		border-radius: 20rpx;
		margin-bottom: 10rpx;

		image {
			width: 100%;
		}
	}

	.title-box {
		height: 110rpx;
	}

	.design-list {
		width: 240rpx;
		height: 340rpx;
		padding: 10rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 14rpx 1px rgba(0, 0, 0, 0.08);
		border-radius: 20rpx;

		.img-box {
			width: 220rpx;
			height: 220rpx;
			min-width: 220rpx;
			border-radius: 18rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>